<template>
    <div id="FaultCircle">
        <div style="padding-top: 10px"><span class="circleHeader">机械</span></div>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="6">
                <div ref="circlePic" style="width: 200px;height: 230px;margin-top: -10px"></div>
            </el-col>
            <el-col :span="18">
                <el-table
                        class="myTable"
                        :data="tableData"
                        :span-method="objectSpanMethod"
                        :header-cell-style=
                                "{'text-align':'center',background:'#131E3D',borderColor:'#242F4F'}"
                        :cell-style=
                                "{'text-align':'center',background:'#0F172D',borderColor:'#242F4F'}"
                        style="margin-top: 10px">
                    <el-table-column
                            prop="infoType"
                            label=""
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="subSystem"
                            label="子系统"
                            width="65">
                    </el-table-column>
                    <el-table-column
                            prop="infoText"
                            label="故障内容"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="infoTime"
                            label="发生时间"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            prop="infoImpact"
                            label="故障影响"
                            width="130">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "FaultCircle",
        data() {
            return {
                tableData: [{
                    infoType: '安全故障',
                    subSystem: '走行部',
                    infoText: '1车走行部1轴1位踏面严重故障',
                    infoTime: '2021-11-29 17:33',
                    infoImpact: '1车踏面故障'
                },
                    {
                        infoType: '安全故障',
                        subSystem: '走行部',
                        infoText: '1车走行部1轴1位踏面严重故障',
                        infoTime: '2021-11-29 17:33',
                        infoImpact: '1车踏面故障'
                    },
                    {
                        infoType: '运营故障',
                        subSystem: '走行部',
                        infoText: '1车走行部1轴1位踏面严重故障',
                        infoTime: '2021-11-29 17:33',
                        infoImpact: '1车踏面故障'
                    },
                    {
                        infoType: '运营故障',
                        subSystem: '走行部',
                        infoText: '1车走行部1轴1位踏面严重故障',
                        infoTime: '2021-11-29 17:33',
                        infoImpact: '1车踏面故障'
                    },
                ]
            }
        },
        methods: {
            drawPie() {
                let charts = echarts.init(this.$refs.circlePic);
                let option = {
                    legend: {
                        orient: 'horizontal',
                        x: 'center',
                        y: 'bottom',
                        itemWidth: 10,
                        textStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            fontSize: 12,
                            padding: 0,
                        },
                        itemGap: 8,
                        backgroundColor: 'transparent',
                        data: ['安全','运营故障','其他故障'],
                        icon: 'circle',
                    },
                    graphic:{
                        type:'text',
                    },//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
                    series: [
                        {
                            name:'饼状图',
                            type: 'pie',
                            radius: ['40%','60%'],
                            itemStyle: {
                                // 这里做改变
                                normal:{   //正常样式
                                    borderWidth: 4,
                                    //    标签
                                    label:{
                                        // 显示数据名称以及具体的数据
                                        // formatter: '{b} : {c} ({d}%)' ,
                                        // 只显示数据名称
                                        /*formatter: function (params) {
                                            return params.value + '%'
                                        }*/
                                        formatter: '{c}%',
                                        fontSize: '10',
                                        color:'white',
                                    },
                                    labelLine :{
                                        length: 1,
                                        show: false
                                    }
                                }
                            },
                            color:['rgba(58,205,206,0.5)','rgba(0,81,226,0.5)','rgba(43,190,90,0.5)'],
                            data: [
                                { value:12, name: '其他故障' },
                                { value:38, name: '运营故障' },
                                { value:50, name: '安全'}
                            ]
                        },
                        {
                            name: '外边框',
                            type: 'pie',
                            clockWise: false,
                            radius: ['60%', '60%'],//边框大小
                            center: ['50%', '50%'],//边框位置
                            labelLine :{
                                show: false
                            },
                            data: [{
                                value: 5,
                                itemStyle: {
                                    normal: {
                                        borderWidth: 1,//设置边框粗细
                                        borderColor: 'rgba(58,205,206,0.8)'//边框颜色，目前定死颜色
                                    }
                                }
                            }]
                        }
                    ]
                }
                charts.setOption(option);
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    if (rowIndex % 2 === 0) {
                        return {
                            rowspan: 2,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            },
        },
        mounted() {
            this.$nextTick(function() {
                this.drawPie('myPie1');
            })
        },
        watch: {

        }
    }
</script>

<style scoped>
    .circleHeader {
        color: rgba(255,255,255,0.87);
        padding-bottom: 10px;
        line-height: 30px;
        padding-left: 26px;
        font-size: 16px;
    }
    .myTable {
        color: rgba(255,255,255,0.87);
        border: #242F4F 1px solid;
        width: 598px;
    }
    .el-table::before {
        background: #242F4F;
    }
</style>
